<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <!-- sessionStorage的使用：存储到本地 储存内容5mb左右
        1. 这个数据本质就是存储在[**当前页面**]的内存中
        2. 生命周期 到页面关闭 数据清除
    setItem(key,value):存储数据  以键值对的方式
    getItem(key):获取数据
    removeItem(key):删除数据
    clear():清空所有数据 -->
    <input type="text" id="userName"><br>
    <input type="button" id="setData" value="设置数据">
    <input type="button" id="getData" value="获取数据">
    <input type="button" id="removeData" value="删除数据">
    <input type="button" id="clear" value="清空数据">
    <script>
        // 设置数据
        document.getElementById("setData").onclick = function(){
            // 获取用户名
            var name = document.querySelector("#userName").value;
            window.sessionStorage.setItem("userName",name);
        };
        // 获取数据
        document.querySelector("#getData").onclick = function(){
            var data = window.sessionStorage.getItem("userName");
            console.log(data);
        };  
        // 获取数据
        document.querySelector("#removeData").onclick = function(){
            // 如果key值没有 不会报错
            window.sessionStorage.removeItem("userName");
        }; 
     </script>
</body>
</html>